import { FillAddress } from '@/api/draw'
import logo from '@/assets/logo.png'
import Kang from '@/assets/result-1.png'

import { Close } from '@react-vant/icons'
import classNames from 'classnames'
import { useRef, useState } from 'react'
import { Checkbox, Dialog, Popup, Toast } from 'react-vant'
import { useMutation } from 'umi'

import styles from './index.module.less'
import usePrivacyPopup from './usePrivacyPopup'
import useRulesPopup from './useRulesPopup'

export default function useFillAddress(props: {
  onConfirm: () => void
  onlyPhoneMode?: boolean // 是否只需要手机号
}) {
  const { renderNode: renderRuleNode, open: openRules } = useRulesPopup()
  const { renderNode: renderPrivacyNode, open: openPrivacy } = usePrivacyPopup()

  const [visible, setvisible] = useState<boolean>(false)
  const { mutateAsync } = useMutation(FillAddress)

  const [agree, setAgeee] = useState<boolean>(true)

  // input refs
  const inputName = useRef<HTMLInputElement>(null)
  const inputPhone = useRef<HTMLInputElement>(null)
  const inputAddress = useRef<HTMLTextAreaElement>(null)

  function renderNode() {
    return (
      <>
        <Popup
          visible={visible}
          className="w-[640px] bg-gradient-to-t from-[#6991c7] to-[#a3bded] border-white border p-4 text-base"
          style={{
            overflow: 'visible',
          }}
          closeable
          onClose={() => setvisible(false)}
          round
          closeIcon={<Close className="text-3xl text-white active:scale-95" />}
        >

          <img
            src={logo}
            className="block mx-auto mb-6 h-8"
            alt=""
          />

          {!props.onlyPhoneMode && (
            <>
              <label
                className={classNames(
                  styles.addressLabel,
                  'text-white  bg-[#2a4169] rounded-full text-sm px-3 py-1 inline-block mb-2',
                )}
              >
                联系人
              </label>
              <input
                ref={inputName}
                type="text"
                placeholder="请输入姓名"
                className={classNames(
                  styles.addressInput,
                  ' placeholder:text-[rgba(255,255,255,.6)] text-white rounded-none px-0 py-2 mb-6 block w-full bg-transparent border border-l-0 border-t-0 border-r-0',
                )}
              />
            </>
          )}
          <label
            className={classNames(
              styles.addressLabel,
              'text-white  bg-[#2a4169] rounded-full text-sm px-3 py-1 inline-block mb-2',
            )}
          >
            联系方式
          </label>
          <input
            ref={inputPhone}
            type="text"
            placeholder="请输入手机号"
            className={classNames(
              styles.addressInput,
              'placeholder:text-[rgba(255,255,255,.6)] text-white rounded-none px-0 py-2 mb-6 block w-full bg-transparent border border-l-0 border-t-0 border-r-0',
            )}
          />
          {!props.onlyPhoneMode && (
            <>
              <label
                className={classNames(
                  styles.addressLabel,
                  'text-white  bg-[#2a4169] rounded-full text-sm px-3 py-1 inline-block mb-2',
                )}
              >
                收货地址
              </label>
              <textarea
                rows={2}
                placeholder="请输入收货地址"
                ref={inputAddress}
                className={classNames(
                  styles.addressInput,
                  'placeholder:text-[rgba(255,255,255,.6)] text-white p-2 block w-full rounded-md bg-[rgba(0,0,0,.1)]',
                )}
              />
            </>
          )}

          <Checkbox
            onChange={setAgeee}
            defaultChecked
            shape="square"
            className="items-start mt-2"
            iconSize={16}
            checkedColor="#2a4169"
          >
            <p className="text-xs text-white">
              我们需要您的以上信息用于礼品的派送，我们将严格遵照相关法律法规的
              要求保护您的个人信息。请您仔细阅读我们的
              {' '}
              <span
                onClick={() => openPrivacy()}
                className="underline"
              >
                《隐私声明》
              </span>
              和
              <span
                className="underline"
                onClick={() => {
                  Dialog.confirm({
                    title: '信息收集',
                    message: `授权“秒针分析系统”作为用户行为数据接收方收集/获取其平台下的用户信息`,
                  })
                }}
              >
                信息收集
              </span>
              ，点击下方提交按钮 代表您已知悉并同意我们收集处理上述信息。
            </p>
          </Checkbox>

          <button
            type="button"
            onClick={async () => {
              const name = inputName.current?.value
              const phone = inputPhone.current?.value
              const address = inputAddress.current?.value

              if (!name && inputName.current)
                return Toast.fail('请输入联系人姓名')
              if (!phone)
                return Toast.fail('请输入手机号')
              if (phone && phone.length !== 11)
                return Toast.fail('请输入正确的手机号')
              if (!address && inputAddress.current)
                return Toast.fail('请输入收货地址')

              if (!agree)
                return Toast.fail('请同意条款')

              await mutateAsync({
                address,
                phone,
                name,
              })

              Toast.success('填写成功!')
              setvisible(false)
              props.onConfirm && props.onConfirm()
            }}
            className={classNames(
              styles.addressBtn,
              'w-[412px] h-[119px] mx-auto block my-4 bg-cover bg-no-repeat active:scale-95',
            )}
          />

          <p
            className="text-base text-center text-white underline"
            onClick={() => openRules()}
          >
            活动规则
          </p>

          <img src={Kang} className=" absolute -left-4 -bottom-8 w-[184px]" alt="" />
        </Popup>

        {renderRuleNode()}
        {renderPrivacyNode()}
      </>
    )
  }

  return {
    open() {
      setvisible(true)
    },
    renderNode,
  }
}
